{% extends "base.html" %}

{% set current_menu = 'work_hour' %}
{% set current_page = 'work_hour_create' %}

{% block title %}工时填报{% endblock %}

{% block content %}
<div class="container mx-auto">

    
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('project.list_projects') }}" class="text-gray-500 hover:text-gray-700">项目管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">工时填报</li>
        </ol>
    </nav>
            
            <!-- 任务统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">未开始</p>
                            <p class="text-2xl font-bold text-gray-800">{{ not_started_tasks|length }}</p>
                        </div>
                        <div class="rounded-full bg-gray-100 p-3">
                            <i class="fas fa-tasks text-gray-600"></i>
                        </div>
                    </div>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-blue-600">进行中</p>
                            <p class="text-2xl font-bold text-blue-700">{{ in_progress_tasks|length }}</p>
                        </div>
                        <div class="rounded-full bg-blue-100 p-3">
                            <i class="fas fa-spinner text-blue-600"></i>
                        </div>
                    </div>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-green-600">已完成</p>
                            <p class="text-2xl font-bold text-green-700">{{ completed_tasks|length }}</p>
                        </div>
                        <div class="rounded-full bg-green-100 p-3">
                            <i class="fas fa-check-circle text-green-600"></i>
                        </div>
                    </div>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">已关闭</p>
                            <p class="text-2xl font-bold text-gray-700">{{ closed_tasks|length }}</p>
                        </div>
                        <div class="rounded-full bg-gray-100 p-3">
                            <i class="fas fa-archive text-gray-600"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务筛选区域 -->
            <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6 shadow-sm">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
                    <div class="flex space-x-2 mb-4 md:mb-0">
                        <button id="refresh-tasks" class="px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                            <i class="fas fa-sync-alt mr-2"></i>刷新
                        </button>
                        <button id="export-tasks" class="px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                            <i class="fas fa-download mr-2"></i>导出
                        </button>
                    </div>
                    <div class="w-full md:w-64">
                        <div class="relative">
                            <input type="text" id="task-search" placeholder="搜索任务..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-search text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">任务状态</label>
                        <select id="status-filter" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">全部状态</option>
                            <option value="未开始">未开始</option>
                            <option value="进行中">进行中</option>
                            <option value="已完成">已完成</option>
                            <option value="已关闭">已关闭</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
                        <select id="priority-filter" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">全部优先级</option>
                            <option value="高">高</option>
                            <option value="中">中</option>
                            <option value="低">低</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">所属项目</label>
                        <select id="project-filter" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">全部项目</option>
                            {% for project in projects %}
                            <option value="{{ project.id }}">{{ project.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="flex justify-end space-x-2">
                    <button id="filter-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                        <i class="fas fa-filter mr-2"></i>查询
                    </button>
                    <button id="reset-btn" class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                        <i class="fas fa-redo mr-2"></i>重置
                    </button>
                </div>
            </div>
            
            <!-- 任务列表 -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属项目</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优先级</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- 未开始任务 -->
                        {% if not_started_tasks %}
                            {% for task in not_started_tasks %}
                                <tr class="task-row hover:bg-blue-50 cursor-pointer transition-colors" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})" data-status="未开始">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ task.name }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.project.name }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            未开始
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                            {% if task.priority == '高' %}bg-red-100 text-red-800
                                            {% elif task.priority == '中' %}bg-yellow-100 text-yellow-800
                                            {% else %}bg-green-100 text-green-800{% endif %}">
                                            {{ task.priority or '中' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="h-2 rounded-full progress-bar" 
                                                 data-progress="{{ task.progress or 0 }}"
                                                 style="width: {{ task.progress or 0 }}%; {% if task.progress >= 100 %}background-color: #10B981{% elif task.progress >= 50 %}background-color: #3B82F6{% else %}background-color: #F59E0B{% endif %};"></div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">{{ task.progress or 0 }}%</div>
                                    </td>
                                    <td class="px-4 py-3 text-sm font-medium">
                                        <button class="select-task-btn text-blue-600 hover:text-blue-900" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})">
                                            工时填报
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                        
                        <!-- 进行中任务 -->
                        {% if in_progress_tasks %}
                            {% for task in in_progress_tasks %}
                                <tr class="task-row hover:bg-blue-50 cursor-pointer transition-colors" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})" data-status="进行中">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ task.name }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.project.name }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            进行中
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                            {% if task.priority == '高' %}bg-red-100 text-red-800
                                            {% elif task.priority == '中' %}bg-yellow-100 text-yellow-800
                                            {% else %}bg-green-100 text-green-800{% endif %}">
                                            {{ task.priority or '中' }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                                            <div class="h-2.5 rounded-full progress-bar" 
                                                 data-progress="{{ task.progress or 0 }}"
                                                 style="width: {{ task.progress or 0 }}%; {% if task.progress >= 100 %}background-color: #10B981{% elif task.progress >= 50 %}background-color: #3B82F6{% else %}background-color: #F59E0B{% endif %};"></div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">{{ task.progress or 0 }}%</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="select-task-btn text-primary hover:text-blue-600 transition-colors" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})">
                                            <i class="fas fa-clock mr-1"></i>工时填报
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                        
                        <!-- 已完成任务 -->
                        {% if completed_tasks %}
                            {% for task in completed_tasks %}
                                <tr class="task-row hover:bg-blue-50 cursor-pointer transition-colors" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})" data-status="已完成">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ task.name }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.project.name }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            已完成
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                            {% if task.priority == '高' %}bg-red-100 text-red-800
                                            {% elif task.priority == '中' %}bg-yellow-100 text-yellow-800
                                            {% else %}bg-green-100 text-green-800{% endif %}">
                                            {{ task.priority or '中' }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                                            <div class="h-2.5 rounded-full progress-bar" 
                                                 data-progress="{{ task.progress or 0 }}"
                                                 style="width: {{ task.progress or 0 }}%; {% if task.progress >= 100 %}background-color: #10B981{% elif task.progress >= 50 %}background-color: #3B82F6{% else %}background-color: #F59E0B{% endif %};"></div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">{{ task.progress or 0 }}%</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="select-task-btn text-primary hover:text-blue-600 transition-colors" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})">
                                            <i class="fas fa-clock mr-1"></i>工时填报
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                        
                        <!-- 已关闭任务 -->
                        {% if closed_tasks %}
                            {% for task in closed_tasks %}
                                <tr class="task-row hover:bg-blue-50 cursor-pointer transition-colors opacity-60" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})" data-status="已关闭">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ task.name }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.project.name }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            已关闭
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                            {% if task.priority == '高' %}bg-red-100 text-red-800
                                            {% elif task.priority == '中' %}bg-yellow-100 text-yellow-800
                                            {% else %}bg-green-100 text-green-800{% endif %}">
                                            {{ task.priority or '中' }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                                            <div class="h-2.5 rounded-full progress-bar" 
                                                 data-progress="{{ task.progress or 0 }}"
                                                 style="width: {{ task.progress or 0 }}%; {% if task.progress >= 100 %}background-color: #10B981{% elif task.progress >= 50 %}background-color: #3B82F6{% else %}background-color: #F59E0B{% endif %};"></div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">{{ task.progress or 0 }}%</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="select-task-btn text-primary hover:text-blue-600 transition-colors" data-task-id="{{ task.id }}" data-task-name="{{ task.name }} ({{ task.project.name }})">
                                            <i class="fas fa-clock mr-1"></i>工时填报
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                        
                        <!-- 无任务数据提示 -->
                        {% if not not_started_tasks and not in_progress_tasks and not completed_tasks and not closed_tasks %}
                            <tr id="no-task-row" class="hidden">
                                <td colspan="6" class="px-4 py-8 text-center">
                                    <div class="text-gray-400 mb-2">
                                        <i class="fas fa-tasks text-4xl"></i>
                                    </div>
                                    <p class="text-gray-500">暂无符合条件的任务</p>
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
                <div class="sticky bottom-0 bg-white border-t border-gray-200 px-4 py-3 sm:px-6 mt-4">
                    <div class="flex flex-1 justify-between sm:hidden">
                        <button id="prev-page-btn" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                            上一页
                        </button>
                        <button id="next-page-btn" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                            下一页
                        </button>
                    </div>
                    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                显示第 <span id="start-item" class="font-medium">1</span> 至 
                                <span id="end-item" class="font-medium">10</span> 条，
                                共 <span id="total-items" class="font-medium">0</span> 条结果
                            </p>
                        </div>
                        <div>
                            <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                                <button id="prev-page-btn" class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed">
                                    <span class="sr-only">上一页</span>
                                    <i class="fas fa-chevron-left h-5 w-5" aria-hidden="true"></i>
                                </button>
                                
                                <!-- 页码按钮 -->
                                <div id="page-numbers" class="flex">
                                    <!-- 页码将通过JavaScript动态生成 -->
                                </div>
                                
                                <button id="next-page-btn" class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed">
                                    <span class="sr-only">下一页</span>
                                    <i class="fas fa-chevron-right h-5 w-5" aria-hidden="true"></i>
                                </button>
                            </nav>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    

</div>

<!-- 工时填报模态框 -->
<div id="workHourModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center">
    <div class="relative mx-auto p-6 border w-full max-w-4xl shadow-2xl rounded-xl bg-white my-8">
        <div class="">
            <!-- 模态框标题 -->
            <div class="flex items-center justify-between pb-4 border-b-2 border-gray-100 mb-6">
                <h3 class="text-2xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-clock mr-3 text-blue-600"></i>
                    工时填报
                </h3>
                <button type="button" class="text-gray-400 hover:text-gray-600 transition-colors p-2 rounded-full hover:bg-gray-100" onclick="hideModal('workHourModal')">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <form id="workHourForm" method="post" action="{{ url_for('work_hour.create') }}" class="space-y-6">
                <input type="hidden" id="modalTaskId" name="task_id">
                
                <!-- 任务信息区域 -->
                <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-gray-600 text-sm"></i>
                        任务信息
                    </h3>
                    <div class="space-y-3">
                        <!-- 任务名称单独一行 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">任务名称</label>
                            <input type="text" id="modalTaskName" class="w-full border border-gray-300 rounded-lg px-3 py-2 bg-white shadow-sm text-gray-900 font-medium text-sm" readonly>
                        </div>
                        <!-- 计划开始时间和计划结束时间在一行 -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">计划开始时间</label>
                                <input type="text" id="modalPlanStartDate" class="w-full border border-gray-300 rounded-lg px-3 py-2 bg-white shadow-sm text-gray-700 text-sm" readonly>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">计划结束时间</label>
                                <input type="text" id="modalPlanEndDate" class="w-full border border-gray-300 rounded-lg px-3 py-2 bg-white shadow-sm text-gray-700 text-sm" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工时填报区域 -->
                <div class="bg-blue-50 rounded-xl p-4 border border-blue-200">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center">
                        <i class="fas fa-stopwatch mr-2 text-blue-600 text-sm"></i>
                        工时填报
                    </h3>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                工作日期 <span class="text-red-500">*</span>
                            </label>
                            <input type="date" id="modalWorkDate" name="work_date" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm text-sm" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                工时 <span class="text-red-500">*</span>
                            </label>
                            <div class="flex">
                                <input type="number" id="modalWorkHours" name="work_hours" class="flex-1 border border-gray-300 rounded-l-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm text-sm" step="0.5" min="0" max="24" required placeholder="0.0">
                                <span class="bg-gray-100 border border-l-0 border-gray-300 rounded-r-lg px-3 py-2 text-gray-600 font-medium flex items-center text-sm">小时</span>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">实际开始时间</label>
                            <input type="date" id="modalStartTime" name="start_time" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">实际结束时间</label>
                            <input type="date" id="modalEndTime" name="end_time" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm text-sm">
                        </div>
                    </div>
                </div>

                <!-- 工作内容区域 -->
                <div class="bg-green-50 rounded-xl p-4 border border-green-200 mb-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center">
                        <i class="fas fa-tasks mr-2 text-green-600 text-sm"></i>
                        工作内容
                    </h3>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            工作内容描述 <span class="text-red-500">*</span>
                        </label>
                        <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm resize-none text-gray-900 text-sm" id="modalDescription" name="description" rows="3" required placeholder="请详细描述您的工作内容..."></textarea>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- 按钮区域 -->
        <div class="flex justify-end space-x-4 pt-6" style="margin-top: 10px;">
            <button type="button" class="px-6 py-3 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors font-medium" onclick="hideModal('workHourModal')">
                <i class="fas fa-times mr-2"></i>取消
            </button>
            <button type="button" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center" onclick="submitWorkHourForm()">
                <i class="fas fa-paper-plane mr-2"></i>提交工时记录
            </button>
        </div>
    </div>
</div>

<script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化日期选择器
        const workDateInput = document.getElementById('modalWorkDate');
        if (workDateInput) {
            workDateInput.value = new Date().toISOString().split('T')[0];
        }
        
        // 绑定筛选事件
        const filterInputs = document.querySelectorAll('#task-search, #status-filter, #priority-filter, #project-filter');
        filterInputs.forEach(input => {
            input.addEventListener('input', filterTasks);
        });
        
        // 绑定工时输入验证
        const workHoursInput = document.getElementById('modalWorkHours');
        if (workHoursInput) {
            workHoursInput.addEventListener('input', function() {
                let value = this.value;
                if (value && !isNaN(value)) {
                    if (parseFloat(value) > 24) {
                        this.value = 24;
                    } else if (parseFloat(value) < 0) {
                        this.value = 0;
                    }
                }
            });
        }
        
        // 初始化任务选择
        const taskSelect = document.getElementById('modalTaskId');
        if (taskSelect) {
            taskSelect.addEventListener('change', function() {
                checkTaskDependencies(this.value);
            });
        }
        
        // 初始筛选
        filterTasks();
    });

    // 筛选任务函数
    function filterTasks() {
        const searchTerm = document.getElementById('task-search').value.toLowerCase();
        const statusFilter = document.getElementById('status-filter').value;
        const priorityFilter = document.getElementById('priority-filter').value;
        const projectFilter = document.getElementById('project-filter').value;
        
        const taskRows = document.querySelectorAll('.task-row');
        let visibleCount = 0;
        
        taskRows.forEach(row => {
            const taskName = row.dataset.taskName.toLowerCase();
            const taskStatus = row.dataset.status;
            const taskPriority = row.querySelector('td:nth-child(4) span').textContent.trim();
            const taskProject = row.querySelector('td:nth-child(2)').textContent.trim();
            
            let show = true;
            
            // 搜索筛选
            if (searchTerm && !taskName.includes(searchTerm)) {
                show = false;
            }
            
            // 状态筛选
            if (statusFilter && taskStatus !== statusFilter) {
                show = false;
            }
            
            // 优先级筛选
            if (priorityFilter && taskPriority !== priorityFilter) {
                show = false;
            }
            
            // 项目筛选
            if (projectFilter) {
                const projectSelect = document.getElementById('project-filter');
                const selectedProjectName = projectSelect.options[projectSelect.selectedIndex].text;
                if (taskProject !== selectedProjectName) {
                    show = false;
                }
            }
            
            if (show) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });
        
        // 更新无数据提示
        const noTaskRow = document.getElementById('no-task-row');
        if (noTaskRow) {
            if (visibleCount === 0) {
                noTaskRow.style.display = '';
                noTaskRow.classList.remove('hidden');
            } else {
                noTaskRow.style.display = 'none';
                noTaskRow.classList.add('hidden');
            }
        }
        
        // 更新分页
        updatePagination();
    }

    // 更新分页函数
    function updatePagination() {
        const visibleRows = document.querySelectorAll('.task-row:not([style*="display: none"])');
        const totalItems = visibleRows.length;
        const itemsPerPage = 10;
        const totalPages = Math.ceil(totalItems / itemsPerPage);
        
        // 更新显示信息
        document.getElementById('total-items').textContent = totalItems;
        
        if (totalItems === 0) {
            document.getElementById('start-item').textContent = 0;
            document.getElementById('end-item').textContent = 0;
        } else {
            document.getElementById('start-item').textContent = 1;
            document.getElementById('end-item').textContent = Math.min(itemsPerPage, totalItems);
        }
        
        // 显示第一页
        showPage(1);
    }

    // 显示指定页
    function showPage(pageNum) {
        const visibleRows = document.querySelectorAll('.task-row:not([style*="display: none"])');
        const itemsPerPage = 10;
        const startIndex = (pageNum - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        
        visibleRows.forEach((row, index) => {
            if (index >= startIndex && index < endIndex) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
        
        // 更新页码显示
        document.getElementById('start-item').textContent = startIndex + 1;
        document.getElementById('end-item').textContent = Math.min(endIndex, visibleRows.length);
        
        // 更新分页按钮状态
        document.getElementById('prev-page-btn').disabled = pageNum <= 1;
        document.getElementById('next-page-btn').disabled = pageNum >= Math.ceil(visibleRows.length / itemsPerPage);
    }

    // 绑定筛选按钮事件
    document.getElementById('filter-btn').addEventListener('click', filterTasks);
    
    // 绑定重置按钮事件
    document.getElementById('reset-btn').addEventListener('click', function() {
        document.getElementById('task-search').value = '';
        document.getElementById('status-filter').value = '';
        document.getElementById('priority-filter').value = '';
        document.getElementById('project-filter').value = '';
        filterTasks();
    });

    // 绑定分页按钮事件
    document.getElementById('prev-page-btn').addEventListener('click', function() {
        const currentPage = Math.ceil(parseInt(document.getElementById('end-item').textContent) / 10);
        if (currentPage > 1) {
            showPage(currentPage - 1);
        }
    });

    document.getElementById('next-page-btn').addEventListener('click', function() {
        const currentPage = Math.ceil(parseInt(document.getElementById('end-item').textContent) / 10);
        const totalItems = parseInt(document.getElementById('total-items').textContent);
        const totalPages = Math.ceil(totalItems / 10);
        if (currentPage < totalPages) {
            showPage(currentPage + 1);
        }
    });

    // 绑定刷新按钮事件
    document.getElementById('refresh-tasks').addEventListener('click', function() {
        location.reload();
    });

    // 绑定导出按钮事件
    document.getElementById('export-tasks').addEventListener('click', function() {
        const visibleRows = document.querySelectorAll('.task-row:not([style*="display: none"])');
        let csvContent = "任务名称,所属项目,状态,优先级,进度\n";
        
        visibleRows.forEach(row => {
            const taskName = row.querySelector('td:nth-child(1)').textContent.trim();
            const project = row.querySelector('td:nth-child(2)').textContent.trim();
            const status = row.querySelector('td:nth-child(3) span').textContent.trim();
            const priority = row.querySelector('td:nth-child(4) span').textContent.trim();
            const progress = row.querySelector('td:nth-child(5) .text-xs').textContent.trim();
            
            csvContent += `"${taskName}","${project}","${status}","${priority}","${progress}"\n`;
        });
        
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', '任务列表_' + new Date().toLocaleDateString() + '.csv');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });

    // 绑定任务行点击事件
    document.querySelectorAll('.task-row').forEach(row => {
        row.addEventListener('click', function(e) {
            if (!e.target.classList.contains('select-task-btn')) {
                const taskId = this.dataset.taskId;
                const taskName = this.dataset.taskName;
                showWorkHourModal(taskId, taskName);
            }
        });
    });

    // 绑定工时填报按钮事件
    document.querySelectorAll('.select-task-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const taskId = this.dataset.taskId;
            const taskName = this.dataset.taskName;
            showWorkHourModal(taskId, taskName);
        });
    });

    // 显示工时填报模态框
    function showWorkHourModal(taskId, taskName) {
        document.getElementById('modalTaskId').value = taskId;
        document.getElementById('modalTaskName').value = taskName;
        
        // 获取任务详情
        fetch(`/api/task/${taskId}`)
            .then(response => response.json())
            .then(data => {
                if (data.task) {
                    document.getElementById('modalPlanStartDate').value = data.task.start_date || '';
                    document.getElementById('modalPlanEndDate').value = data.task.end_date || '';
                }
            })
            .catch(error => {
                console.error('获取任务详情失败:', error);
            });
        
        document.getElementById('workHourModal').classList.remove('hidden');
    }

    // 隐藏模态框函数
    function hideModal(modalId) {
        document.getElementById(modalId).classList.add('hidden');
    }

    // 检查任务依赖
    function checkTaskDependencies(taskId) {
        if (!taskId) return;
        
        fetch(`/api/task/${taskId}/dependencies`)
            .then(response => response.json())
            .then(data => {
                if (data.dependencies && data.dependencies.length > 0) {
                    console.log('任务依赖:', data.dependencies);
                }
            })
            .catch(error => {
                console.error('检查任务依赖失败:', error);
            });
    }

    // 提交工时表单
    function submitWorkHourForm() {
        const form = document.getElementById('workHourForm');
        const workHours = document.getElementById('modalWorkHours').value;
        const workDate = document.getElementById('modalWorkDate').value;
        
        // 验证必填字段
        if (!workHours || !workDate) {
            showFlashMessage('请填写所有必填字段', 'error');
            return;
        }
        
        // 禁用提交按钮，防止重复提交
        const submitBtn = document.querySelector('#workHourModal button[onclick="submitWorkHourForm()"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>提交中...';
        
        // 提交表单
        fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            // 恢复提交按钮状态
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            
            if (response.redirected) {
                // 如果服务器返回重定向，刷新页面
                window.location.reload();
                return;
            }
            return response.json().then(data => {
                return { response, data };
            }).catch(error => {
                // 如果响应不是JSON格式，可能是重定向或其他情况
                console.error('Response parsing error:', error);
                window.location.reload();
                throw error;
            });
        })
        .then(({ response, data }) => {
            if (data && data.success) {
                showFlashMessage('工时记录成功!', 'success');
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('workHourModal'));
                modal.hide();
                // 重置表单
                form.reset();
                // 刷新页面以显示最新数据
                window.location.reload();
            } else if (data && !data.success) {
                showFlashMessage('工时记录失败: ' + (data.message || '未知错误'), 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showFlashMessage('工时记录失败，请稍后重试', 'error');
        });
    }
</script>
</body>
</html>
{% endblock %}